<template>
	<view style="margin-bottom: 100rpx;">
		<view class="info">
			<view class="name">店铺图片</view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" previewImage="true" width="120rpx" height="120rpx" @delete="deletePic"
				name="1" multiple :maxCount="1">
			</u-upload>
		</view>
		<view class="info-text">
			<view class="name">名称</view>
			<input type="text" placeholder="请输入" v-model="storeName">
		</view>
		<view class="info-text">
			<view class="name">城市</view>
			<input type="text" disabled="true" placeholder="30" v-model="storeCity"  @click="showCity = true">
		</view>
		<view class="info-text">
			<view class="name">具体位置</view>
			<input type="text" placeholder="500" v-model="storeLocation">
		</view>
		<view class="info-text">
			<view class="name">开店时间</view>
			<input type="text" placeholder="请输入" v-model="storeSatrtTime" disabled="true" @click="showStarTime = true">
		</view>
		<view class="info-text">
			<view class="name">关店时间</view>
			<input type="text" placeholder="请输入" v-model="storeCloseTime" disabled="true" @click="showEndTime = true">
		</view>
		<view class="info-text">
			<view class="name">联系电话</view>
			<input type="text" placeholder="请输入" v-model="storePhone">
		</view>
		<view class="info-text">
			<view class="name">管理员手机号</view>
			<input type="text" placeholder="请输入" v-model="administratorPhone">
		</view>
		<!-- 类型 -->
		<view class="info-text">
			<view class="name">门锁类型</view>
			<view style="display: flex;align-items: center;width: 290rpx;justify-content: space-between;">
				<view :class="lockType == 1 ? 'active' : 'weisele'" @click="lockType = 1">WI-FI</view>
				<view :class="lockType == 0 ? 'active' : 'weisele'" @click="lockType = 0">蓝牙</view>
			</view>
		</view>
		<view class="info-text">
			<view class="name">大门门锁编号</view>
			<input type="text" placeholder="请输入" v-model="storeNo">
		</view>
		<view class="info-text-textarea">
			<view class="name">门店介绍</view>
			<textarea placeholder="请输入门店介绍" v-model="storeIntroduce"></textarea>
		</view>
		<view class="info-text-textarea">
			<view class="name">茶市介绍</view>
			<textarea placeholder="请输入茶市介绍" v-model="roomIntroduce"></textarea>
		</view>
		<button class="btn" @click="setStoreInfo">确认添加</button>
		<view style="margin-top: 50rpx;width: 100%;height: 50rpx;"></view>
		<u-picker :show="showCity" :defaultIndex="[cityIndex]" :columns="cityList" keyName="name" @confirm="selectItem" @cancel="showCity = false">
		</u-picker>
		<u-datetime-picker :show="showStarTime" :defaultIndex="[2,5]" v-model="storeSatrtTime" mode="time"  @confirm="selectStarTime" @cancel="showStarTime = false" ></u-datetime-picker>
		<u-datetime-picker :show="showEndTime"  v-model="storeCloseTime" mode="time"  :minHour="minHour" :minMinute="minMinute"  @confirm="selectEndTime" @cancel="showEndTime = false" ></u-datetime-picker>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				fileList1: [],
				cityIndex:0,
				// 城市id
				cityId:null,
				showCity: false,
				showStarTime:false,
				showEndTime:false,
				minHour:'',
				minMinute:'',
				cityList: [],
				// 上传的图片
				imageText:'',
				storeId: uni.getStorageSync('storeListId')[0],
				// 名称
				storeName: "",
				// 城市
				storeCity: "",
				// 具体位置
				storeLocation: "",
				// 开店时间
				storeSatrtTime: "",
				// 关店时间
				storeCloseTime: "",
				// 联系电话
				storePhone: "",
				// 管理员手机号
				administratorPhone: "",
				// 门锁类型
				lockType: 1,
				// 大门门锁编号
				storeNo: "",
				// 门店介绍
				storeIntroduce: "",
				// 茶市介绍
				roomIntroduce: "",
			}
		},
		onLoad() {
			this.getStoreInfo();
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				// this.imageList.splice(event.index, 1)
				this.imageText = '';
			},
			
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.app_url + '/login/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let url = 'https://gongxiangchashi.rchz.top' + JSON.parse(res.data).data.url
							this.imageText = url
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			selectItem(e) {
				this.storeCity = e.value[0].name
				this.showCity = false;
				this.cityId = e.value[0].id
			},
			selectStarTime(e){
				this.showStarTime = false;
				this.storeSatrtTime =  e.value
				this.minHour = this.storeSatrtTime.substring(0,2)
				this.minMinute = this.storeSatrtTime.substring(3,5)
			},
			selectEndTime(e){
				this.showEndTime = false;
				this.storeCloseTime =  e.value
			},
			getStoreInfo() {
				this.https('/store/detail', {
					store_id: this.storeId
				},"GET").then(res => {
					// 店铺名
					this.storeName = res.data.name;
					this.cityList = [res.data.city_arr];
					// 城市回显
					for (let i = 0; i < res.data.city_arr.length; i++) {
						if (res.data.city_arr[i].id == res.data.city_id) {
							this.storeCity = res.data.city_arr[i].name;
							// 默认选中下表
							this.cityIndex = [i];
						}
					}
					if(res.data.image != 'undefined'){
						this.fileList1 = [];
						this.fileList1.push({
							url:res.data.image,
							name: '',
						})
						if(res.data.image.includes('https://gongxiangchashi.rchz.top')){
							this.imageText =  res.data.image
						}else{
							this.imageText =  'https://gongxiangchashi.rchz.top'+res.data.image
						}
						// this.imageList.push('https://gongxiangchashi.rchz.top'+res.data.image)
					}
					// 具体位置
					this.storeLocation = res.data.address
					// 
					this.storeSatrtTime = res.data.open;
					this.storeCloseTime = res.data.close;
					this.storePhone = res.data.mobile
					this.administratorPhone = res.data.manager_mobile
					this.lockType = res.data.lock_type
					this.storeNo = res.data.lock_no
					this.cityId = res.data.city_id
				})
			},
			setStoreInfo(){
				let row = {};
				// 店铺图片
				row.image = this.imageText;
				// 店铺昵称
				row.name = this.storeName;
				// 详细地址
				row.address = this.storeLocation;
				// 开店时间
				row.open = this.storeSatrtTime;
				// 关店时间
				row.close = this.storeCloseTime;
				// 联系电话
				row.mobile = this.storePhone;
				// 管理员电话
				row.manager_password = this.administratorPhone;
				// 店铺介绍
				row.store_content = this.storeIntroduce;
				// 茶市介绍
				row.content = this.roomIntroduce;
				// 门锁编号
				row.lock_no = this.storeNo;
				// 门锁类型
				row.lock_type = this.lockType;
				// 维度
				row.lat = '';
				// 精度
				row.lon = '';
				// 城市id
				row.city_id = this.cityId;
				this.https('/store/edit', {
					store_id: this.storeId,
					image:this.imageText,
					name:this.storeName,
					address:this.storeLocation,
					open:this.storeSatrtTime,
					close:this.storeCloseTime,
					mobile:this.storePhone,
					manager_password:this.administratorPhone,
					store_content:this.storeIntroduce,
					content:this.roomIntroduce,
					lock_no:this.storeNo,
					lock_type:this.lockType,
					city_id:this.cityId,
				}).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.getStoreInfo();
				}).catch(err=>{
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			}
		}

	}
</script>

<style lang="scss">
	.info {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 22rpx;
	}

	.u-page__tag-item {
		margin-right: 20px;
	}

	.btn {
		width: 630rpx;
		height: 85rpx;
		background: #00809F;
		border-radius: 16rpx;
		color: #FFF;
		margin-top: 50rpx;
		font-size: 32rpx;
		line-height: 85rpx;
		margin-bottom: 100rpx;
	}

	.weisele {
		width: 130rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 8rpx;
		opacity: 0.4;
		text-align: center;
		color: #FFF;
		font-size: 26rpx;
		line-height: 48rpx;
	}

	.active {
		width: 130rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 8rpx;
		text-align: center;
		color: #FFF;
		font-size: 26rpx;
		line-height: 48rpx;
	}

	.info-text {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 22rpx;

		input {
			width: 460rpx;
			height: 2rpx;
			font-size: 26rpx;
			border: none;
			border-bottom: 1rpx solid #DADDE1;
			padding-bottom: 10rpx;
		}
	}

	.name {
		width: 200rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.info-text-textarea {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		margin-top: 22rpx;

		textarea {
			width: 630rpx;
			height: 148rpx;
			padding: 10rpx 20rpx;
			border-radius: 16rpx;
			border: 2rpx solid #DADDE1;
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}

		.name {
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
		}
	}
</style>
